<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 1226px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;

        }

        img {
            width: 1226px;
            height: auto;
        }

        .left,
        .right {
            width: 50px;
            height: 80px;
            font-size: 40px;
            background: rgba(0, 0, 0, 0.1);
            color: white;
            line-height: 80px;
            text-align: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            cursor: pointer;

        }


        .left {
            left: 0;
        }

        .right {
            right: 0;
        }

        .dotBar {
            position: absolute;
            bottom: 80px;
            right: 100px;
            display: flex;
            z-index: 10;
        }

        .dotBar li {
            flex: 1;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 2px solid hsla(0, 0%, 100%, .3);
            margin: 0 6px;
            font-size: 0;


        }

        .dotBar li:hover {
            background: rgba(0, 0, 0, 0.4);
            color: white;
        }

        .dotBar .active {
            background: rgba(0, 0, 0, 0.4);
            color: white;
        }

        .slideBar {
            width: max-content;
            overflow: hidden;
            position: absolute;

        }

        .slideBar .show {
            display: block;
        }

        .slideBar li {
            width: 1226px;
            float: left;
            text-align: center;
            /* background: #fff;
            text-align: center; */

        }

        .slideBar li img {
            width: 100%;

        }
    </style>

</head>

<body>

    <div class="wrap">
        <div class="left">&lt;</div>
        <div class="right">&gt;</div>
        <ul class="dotBar">
            <li class="active">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </ul>
        <ul class="slideBar">
            <li class="show"><img src="./lunbo1.png" alt=""></li>
            <li><img src="./lunbo2.jpg" alt=""></li>
            <li><img src="./lunbo3.jpg" alt=""></li>
            <li><img src="./lunbo4.jpg" alt=""></li>
            <li><img src="./lunbo5.png" alt=""></li>
            <li><img src="./lunbo6.jpg" alt=""></li>
            <!-- <li><img src="./lunbo1.png" alt=""></li> -->
        </ul>
    </div>
</body>
<script>
    var index = 0;
    var timer = null;
    var swiperWidth = $(".wrap").width(); //  获取图片的宽度
    console.log(swiperWidth);
    //  页面加载播放
    autoPlay();

    // 点击轮播


    $('.dotBar li').click(function () {


        index = $(this).index();
        console.log(index);
        move();
    })

    //  鼠标移入停止  移出继续

    $('.wrap').mouseenter(function () {

        clearInterval(timer);

    }).mouseleave(function () {


        autoPlay();
    })

    //  左右点击

    $('.left').click(function () {

        if ($('.slideBar').is(':animated')) return false;
        index--;
        move();
    })
    $('.right').click(function () {

        if ($('.slideBar').is(':animated')) return false;
        index++;
        move();
    })


    //   封装 自动播放
    function autoPlay() {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            move();
        }, 2000)
    }

    //  封装运动
    function move() {
        //  左键点击  判断
        if (index < 0) {
            index = $('.dotBar li').length;
            $('.slideBar').stop().css({ left: -swiperWidth * index });
            index--;

        }
        //  右键点击  
        if (index > $('.dotBar li').length) {
            index = 0;
            $('.slideBar').stop().css({ left: 0 });
            index++;

        }

        //  点击轮播  
        var activeIndex = index >= $('.dotBar li').length ? 0 : index;
        // 点击下标 添加 active 属性
        $('.dotBar li').eq(activeIndex).addClass('active').siblings().removeClass('active');
        // 对应 图片显示
        $('.slideBar').stop().animate({ left: -swiperWidth * index }, function () {
            console.log("本次运动完毕");
            if (index >= $('.dotBar li').length) {
                $('.slideBar').css({ left: 0 });
                index = 0;
            }
        })

    }




</script>

</html>